<script src="js/avalon.js"></script>
<script type="text/javascript">
var dialog={
    popWidth : 800,
    src:"html/uploader_dialog.html",
    title:"照片上传"
};
var model = avalon.define({
        $id:"shop-detail",
        shop:{},
        removePhotoClick:function(url){
            for (var i=0;i<model.shop.photo.length;i++){
                if (model.shop.photo[i]==url){
                    model.shop.photo.splice(i,1);
                }
            }
        },
        saveClick:function(){
            callSvr("shop/updateDetail",model.shop, function(result) {
                 toastr.success('保存成功！','');
                 callSvr("shop/getDetail",{}, function(result) {
                     model.shop = result;
                });
            });
        },
        uploaderClick:function(){
           popWindowShow(dialog);
        }
    });

callSvr("shop/getDetail",{}, function(result) {
     model.shop = result;
     //toastr.success('调用成功','');
});

function uploadSuccess(url){
    for (var i=0;i<model.shop.photo.length;i++){
        if (model.shop.photo[i]==url){
            return;
        }
    }
    model.shop.photo.push(url);
}

</script>
<div class='panel panel-default' ms-controller="shop-detail">
	<div class='panel-heading'>
        <i class='fa fa-bank fa-2x' style="margin-right: 10px"></i>店铺信息
    </div>
    <div class="panel-body">
    	<form style="overflow:auto">
    		<div class="form-group" style="display: inline-block;width: 100%">
    			<label class="control-label col-xs-2"><span class="must-msg">*&nbsp;</span>店铺名：</label>
    			<div class="control-label col-xs-3">
                    <input type="text" class="form-control validate[required]"
					data-errormessage-value-missing="店铺名不能为空"
					placeholder="请输入店铺名" ms-duplex="shop.shopname" >
                </div>
                <label class="control-label col-xs-2">联系电话：</label>
                <div class="control-label col-xs-2" >
                    <input class="form-control validate[phone]"
                           data-errormessage-value-err="电话号码错误"
                           placeholder="请输入联系电话" ms-duplex="shop.phone" />
                </div>
    		</div>
            <div class="form-group">
    			<label class="control-label col-xs-2">地址：</label>
    			<div class="col-xs-10">
                    <input readonly  ms-attr-value="shop.province" class="pull-left form-control" style="width:80px;">
                    <input readonly  ms-attr-value="shop.city" class="pull-left form-control" style="width:80px;">
                    <input readonly  ms-attr-value="shop.area" class="pull-left form-control" style="width:80px;">
					<input name="street" type="text" class="form-control" ms-duplex="shop.street"
                           style="width:400px;" placeholder="请输入详细地址！">
    			</div>
    		</div>
			<div class="form-group">
				<div class="col-xs-12 panel panel-default" style="position: relative;width:97%;margin: 0 auto;margin: 1em;top:0px;left:0px;">
                    <div class="info" style="margin-top: 10px;">店铺相册中共 {{shop.photo.length}} 张照片。</div>
                    <div class="queueList" style="margin-top: 10px;">
                        <ul class="filelist" style="height: 120px;" >
                            <li ms-repeat="shop.photo" >
                                <p class="imgWrap">
                                    <img ms-src="el + '?/1/w/100/h/150'">
                                </p>
                                <div class="file-panel" style="height:28px;">
                                    <span class="cancel" ms-click="removePhotoClick(el)">删除</span>
                                </div>
                            </li>
                            <li>
                                <i class="fa fa-plus-square-o" ms-click="uploaderClick()" style="font-size:120px;cursor:pointer;"></i>
                            </li>
                        </ul>
                    </div>
				</div>
			</div>
    	</form>
        <div class="form-group col-xs-12">
            <button class="btn btn-info pull-right" style="margin-top: 10px" ms-click="saveClick()" >保存</button>
        </div>
    </div>
</div>
